<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ProfileCard from './components/ProfileCard.vue' // 确保路径正确
import { getProfilesData } from '@/services/matchmaker/matchmaker'
import type { matchmaker } from '@/types/matchmaker/matchmaker'
import { baseImgUrl } from '@/utils/http'
const profiles = ref<matchmaker[]>([])
let user_id = uni.getStorageSync('userInfo').id
onLoad(() => {
  getMat() // 获取数据
})
const getMat = () => {
  getProfilesData().then((res) => {
    profiles.value = (res.data as any).result
    console.log(profiles.value)
  })
}
//跳转至我的红娘
const goMyMatchmaker = () => {
  uni.navigateTo({ url: `/pages/my/MyMatchmaker/MyMatchmaker?id=${user_id}` })
}
//快捷跳转至电话页面
const call = () => {
  uni.makePhoneCall({
    phoneNumber: '1234567890', // 需要拨打的电话号码
    success: function () {
      console.log('拨打电话成功')
    },
    fail: function () {
      console.log('拨打电话失败')
    },
  })
}
</script>

<template>
  <view class="title">
    <image
      :src="baseImgUrl + '/static/image/static/title.png'"
      mode="scaleToFill"
      class="title-image"
    />
  </view>
  <view class="introduce">一对一会员服务，提供恋爱、婚姻、个人提升等全方位情感咨询服务</view>
  <!-- 红娘团队展示 -->
  <view class="matchmaker-container">
    <view scroll-y="true" class="profile-cards">
      <ProfileCard
        v-for="(profile, index) in profiles"
        :key="index"
        :id="profile.id"
        :image="profile.url"
        :name="profile.nickname"
        :description="profile.position"
        class="profile-card"
      />
    </view>
  </view>
  <!-- 底部 -->
  <view class="bottom">
    <view>
      <view class="icon" @click="call">
        <image
          class="bottom-icon-big"
          src="@/static/matchmaker/matchmaker1.png"
          mode="scaleToFill"
        />
      </view>

      <text class="bottom-text">幸福热线</text></view
    >
    <view>
      <view class="icon" @click="call">
        <image
          class="bottom-icon-big"
          src="@/static/matchmaker/matchmaker2.png"
          mode="scaleToFill"
        />
      </view>
      <text class="bottom-text">咨询客服</text>
    </view>
    <view
      ><button @click="goMyMatchmaker" class="button">
        <image class="bottom-icon" src="@/static/matchmaker/matchmaker3.png" mode="scaleToFill" />
        我的红娘
      </button></view
    >
  </view>
</template>
<style scoped lang="scss">
.bottom-text {
  font-size: 28rpx;
  font-weight: 300;
}
.bottom-icon {
  height: 30rpx;
  width: 30rpx;
}
.bottom-icon-big {
  height: 50rpx;
  width: 50rpx;
}
.title {
  position: relative;
  /* font-family: 'Noto Sans SC', sans-serif; */
  text-align: center;
  color: black;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 800;
  .title-image {
    width: 100vw;
    height: 40vh;
  }
}

.introduce {
  font-family: 'Noto Sans SC', sans-serif;
  text-align: center;
  color: #333333;
  font-size: 30rpx;
  line-height: 2;
  width: 80%;
  margin: 0 auto;
  font-weight: 300;
}

.matchmaker-container {
  display: flex;
  justify-content: center;
  padding: 32rpx;
}

.profile-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 120rpx;
}

.profile-card {
  width: calc(50% - 16px);
  max-width: 300px;
}

.bottom {
  display: flex;
  justify-content: space-between;
  padding: 6rpx 40rpx;
  align-items: center;
  position: fixed;
  bottom: 0;
  background-color: white;
  width: 100%;
}
.icon {
  text-align: center;
}
button {
  background: #ec7496;
  color: white;
  border: none;
  padding: 8rpx 50rpx;
  border-radius: 30px;
  font-size: 26rpx;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button {
  font-size: 36rpx;
}
</style>
